//
//  HomePage.swift
//  GoCash
//
//  Created by jie on 2024/5/13.
//

import SwiftUI

struct HomePage: View {
    
    @State var pageState: Int = 0
    
    var body: some View {
        NavigationView {
            ScrollView {
                VStack(spacing: 0){
                    HomePageStateItem().padding(0)
                    NavigationLink(destination: ApprovePage()) {
                        HomePageStateItem().padding(0)
                    }
                    switch pageState {
                    case 0: HomePageState1()
                    case 1: HomePageState2()
                    default:  Text("")
                    }
                }
               
                
            }.padding(.top, 8)
            .background(Color(hex: 0xF8F7FE))
                .navigationBarBackButtonHidden()
                .navigationBarItems(
                    leading: Text(APP_NAME).font(Font.system(size: 22, weight: .black)).foregroundColor(COLOR_312A31),
                    trailing: HomeNaviTradingView()
                )
                .navigationBarUIColor(Color(hex: 0xF8F7FE))
        }
        
    }
}

#Preview {
    HomePage()
}


///首页导航栏
struct HomeNaviTradingView: View {
    var body: some View {
        HStack(spacing: 12) {
            let width = 40.0
            ZStack {
                RoundedRectangle(cornerRadius: 20).foregroundColor(Color(hex:0xEFEBF4))
                Image(systemName: "questionmark.bubble.fill").foregroundColor(MAIN_COLOR).onTapGesture {
                    
                }.frame(width: width, height: width)
            }
            
            ZStack {
                RoundedRectangle(cornerRadius: 20).foregroundColor(Color(hex:0xEFEBF4))
                Image(systemName: "list.bullet.rectangle.portrait.fill").foregroundColor(MAIN_COLOR).onTapGesture {
                    
                }.frame(width: width, height: width)
            }
            
            ZStack {
                RoundedRectangle(cornerRadius: 20).foregroundColor(Color(hex:0xEFEBF4))
                Image(systemName: "person.fill").foregroundColor(MAIN_COLOR).onTapGesture {
                    
                }.frame(width: width, height: width)
            }
            
            
        }
    }
}


///首页页面类型1
struct HomePageState1: View {
    var body: some View {
        
            VStack(spacing: 0) {
                    ZStack(alignment: .top) {
                        RoundedRectangle(cornerRadius: 24).foregroundColor(MAIN_COLOR).frame(height: 210)
                        VStack(spacing: 0) {
                            Text("Puede pedir prestado").font(Font.system(size: 14, weight: .regular)).foregroundColor(.white)
                            Text("$10,000").font(Font.system(size: 52, weight: .bold)).foregroundColor(.white)
                            HStack {
                                Text("Interés: 0.16%").font(Font.system(size: 14, weight: .regular)).foregroundColor(.white)
                                Text("Ver más>").font(Font.system(size: 14, weight: .regular)).foregroundColor(.white).underline(color: .white)
                            }.padding(.top, 12)
                            
                            Button(action: {}, label: {
                                ZStack {
                                    RoundedRectangle(cornerRadius: 25).background(.clear).frame(width: .infinity, height: 50).foregroundColor(COLOR_312A31)
                                    Text("Solicitar ahora").frame(height: 50).foregroundColor(.white).font(Font.system(size: 18, weight: .semibold))
                                }
                            }).background(.clear).padding(.top, 12).frame(width: .infinity)
                        }
                        .padding(EdgeInsets(top: 20, leading: 36, bottom: 0, trailing: 20))
                    }.padding(0)
                    
                    HStack(spacing: 24) {
                        VStack {
                            Image(systemName: "list.bullet.rectangle.portrait.fill").foregroundColor(MAIN_COLOR).onTapGesture {
                                
                            }.frame(width: 38, height: 38)
                            Text("Rellenar la informac").font(Font.system(size: 11, weight: .regular)).foregroundColor(COLOR_312A31)
                        }.padding(.leading, 24)
                        VStack {
                            Image(systemName: "list.bullet.rectangle.portrait.fill").foregroundColor(MAIN_COLOR).onTapGesture {
                                
                            }.frame(width: 38, height: 38)
                            Text("Rellenar la informac").font(Font.system(size: 11, weight: .regular)).foregroundColor(COLOR_312A31)
                        }
                        VStack {
                            Image(systemName: "list.bullet.rectangle.portrait.fill").foregroundColor(MAIN_COLOR).onTapGesture {
                                
                            }.frame(width: 38, height: 38)
                            Text("Rellenar la informac").font(Font.system(size: 11, weight: .regular)).foregroundColor(COLOR_312A31)
                        }.padding(.trailing, 24)
                    }
                    .frame(width: (SCREEN_WIDHT-32), height: 102)
                    .background(.white).cornerRadius(24)
                    .padding(.top, 16)
                    
                Image("home_banner_1", bundle: nil).resizable().frame(width: SCREEN_WIDHT-32).padding(.top, 12)
                    
                    Spacer()
            }.padding(16)
    }
}


///首页页面类型2
struct HomePageState2: View {
    var body: some View {
        VStack(spacing: 0) {
            ZStack(alignment: .top) {
                RoundedRectangle(cornerRadius: 24).foregroundColor(.white).frame(height: 245)
                VStack(spacing: 0){
                    Image("home_icon_1", bundle: nil).padding(.top, 18)
                    Text("Revisando").font(Font.system(size: 18, weight: .bold)).foregroundColor(MAIN_COLOR).padding(.top, 12)
                    Text("Por favor espere con paciencia el resultado de revisión.").font(Font.system(size: 20, weight: .regular)).foregroundColor(COLOR_7C697C).padding(.top, 8).multilineTextAlignment(.center)
                }
            }.padding(EdgeInsets(top: 16, leading: 16, bottom: 0, trailing: 16))
            
            HomePageProcessView()
        }
    }
}


struct HomePageProcessView: View {
    var body: some View {
        ZStack {
            Image("home_back_1", bundle: nil).resizable()
            VStack(alignment: .center) {
                HStack(spacing: 20) {
                    Image("home_icon_2", bundle: nil)
                    Image("home_icon_5", bundle: nil)
                    Image("home_icon_3", bundle: nil)
                    Image("home_icon_5", bundle: nil)
                    Image("home_icon_4", bundle: nil)
                }.padding(.top, 10)
                HStack(spacing: 20) {
                    Text("Enviar solicitud").font(Font.system(size: 12)).foregroundColor(COLOR_312A31)
                    Text("Revisando").font(Font.system(size: 12)).foregroundColor(COLOR_312A31)
                    Text("Recibir dinero").font(Font.system(size: 12)).foregroundColor(COLOR_312A31)
                }.padding(.bottom, 10)
            }
        }.padding(EdgeInsets(top: -10, leading: 10, bottom: 0, trailing: 10))
    }
}


struct HomePageStateItem: View {
    
    var body: some View {
        ZStack {
            COLOR_5AC692.cornerRadius(12).padding(0)
            Color(.white).cornerRadius(12).padding(.leading, 6)
            HStack(spacing: 0){
                Image(systemName: "clock.fill").foregroundColor(COLOR_5AC692).padding(.leading, 12)
                Text("Hay").font(Font.system(size: 12)).foregroundColor(COLOR_7C697C).padding(.leading, 4)
                Text(" 3 préstamos ").font(Font.system(size: 12)).foregroundColor(COLOR_5AC692).padding(0)
                Text("en revisión.").font(Font.system(size: 12)).foregroundColor(COLOR_7C697C).padding(0)
                Spacer()
                Image(systemName: "chevron.right").foregroundColor(COLOR_7C697C).padding(.trailing, 8)
            }
        }
        .frame(height: 40)
        .padding(EdgeInsets(top: 8, leading: 16, bottom: 0, trailing: 16))
    }
}


//#Preview(body: {
//    OrderBottomView()
//})
//
//
//struct OrderDetailView2: View {
//    var body: some View {
//        ZStack {
//            OrderTopBackView()
//            VStack {
//                Spacer()
//                ZStack{
//                    HStack {
//                        Rectangle().foregroundColor(.red)
//                        Rectangle().foregroundColor(.blue)
//                    }
//
//
//                }.edgesIgnoringSafeArea(.bottom).frame(height: 44)
//            }
//        }
//    }
//}
//
//struct OrderTopBackView: View {
//    var body: some View {
//        GeometryReader { geo in
//            VStack{
//                Image("shouye_beijing")
//                    .resizable()
//                    .frame(height: geo.safeAreaInsets.top + 200)
//                Spacer()
//            }
//            .ignoresSafeArea()
//            .background(Color(hex: "#F6F6F6"))
//        }
//    }
//}
//
//struct OrderBottomView: View {
//    var body: some View {
//        GeometryReader { geo in
//            ZStack{
//                HStack {
//                    HStack {
//                        Text("1232423")
//                        Text("fadfd")
//                    }.frame(width: geo.size.width/2.0)
//                    Button(action: {}, label: {
//                        ZStack {
//                            Rectangle().foregroundColor(.blue)
//                            Text("Full Repayment").foregroundColor(.white).font(Font.system(size: 18, weight: .bold))
//                        }
//                    })
//
//                }
//                ZStack {
//                    Image("qipao")
//                    Text("Offer ")
//                        .font(.system(size: 11))
//                        .foregroundColor(Color(hex: "#6D57E9"))
//                        .offset(y:-3)
//                }.offset(CGSize(width: -geo.size.width/4.0, height: -32))
//            }.frame(height: 66)
//        }
//    }
//}
